<script setup>
    import { ref,onMounted } from 'vue';
    import http from "@/utils/http.js";
    import { useRoute } from "vue-router"; // 从 vue-router 导入 useRoute 函数
    const route=useRoute();// 获取当前路由对象
    let id=route.params.id;// 从路由参数中提取 id

    const user=ref(null);
    
    const getUser=async () => {
        const response=await http.get("/user/getUserById",{
            params:{id},  
        });
        user.value=response.data;
    };

    onMounted(()=> {
        getUser();
    });

</script>

<template>
    <div>
        <h2>用户{{ id }}详情</h2>
        <el-card v-if="user">
            <p>id:{{ user.id }}</p>
            <p>姓名:{{ user.name }}</p>
            <p>性别:{{ user.gender }}</p>
            <p>生日:{{ user.birthday }}</p>
            <p>邮箱:{{ user.email }}</p>
            <p>个人简介:{{ user.bio }}</p>
        </el-card>
    </div>
</template>